<template>
  <div>
    <!-- 1.使用方法1 通过$store -->
    <span>count={{ $store.state.count }}</span>
    <!-- 2. 使用方式2 通过计算属性简化模板 -->
    <div>count={{ count }}</div>
    <!-- 调用mutations方式1 通过$store.commit -->
    <button @click="$store.commit('add',10)">+10</button>

    <!--调用mutations方式2 映射-->
    <button @click="add">+10</button>

    <!-- 调用actions方式1 通过$store.dispatch -->
    <button @click="$store.dispatch('addSync')">+1 async</button>
    <!--调用actions方式2 映射-->
    <button @click="addSync">+1 async</button>

    <!-- 调用actions方式1 通过$store.dispatch -->
    <button @click="$store.dispatch('addNSync',10)">+10 async</button>
    <!--调用actions方式 映射-->
    <button @click="addSync(10)">+10 async</button>

    <!-- 调用actions方式1 通过$store.dispatch -->
    <div>{{ $store.state.showCount }}</div>
    <!--调用actions方式 映射-->
    <div>{{ showCount }}</div>

    <!-- 使用模块中的数据 -->
    <!-- $store.state.模块名.属性 -->
    <div>token={{ $store.state.test.token }}</div>
    <!-- 方法默认不用加模块名,会由问题,默认会调到所有没有加namespace的模块的setToken -->
    <!-- <button @click="$store.commit('setToken','abc')">setToken</button> -->
    <!-- 默认不支持模块名调用,需要加配置 -->
    <button @click="$store.commit('test/setToken','abc')">setToken</button>

    <!-- 测试使用icon图标组件 -->
    <svg-icon icon-class="eye" class-name="color-red"></svg-icon>
  </div>
</template>

<script>
// 引入mapState
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: '',
  components: {},
  props: {
  },
  data() {
    return {

    }
  },
  computed: {
    // count() {
    //   return this.$store.state.count
    // }
    // 3. 使用方式3 映射方式批量生成计算属性
    ...mapState(['count', 'age'])
  },
  created() {},
  mounted() {},
  methods: {
    // 调用mutations方式2 映射
    ...mapMutations(['add', 'addN']),
    ...mapActions(['addSync', 'addNSync']),
    ...mapGetters(['showCount'])

  }
}
</script>

<style lang="scss" scoped>
.color-red{
  color: red;
}
</style>

